<template>
	<view class="container">
		<swiper class="swiper" :indicator-dots="true" :autoplay="false">
			<swiper-item v-for="(item, index) in guideList" :key="index">
				<view class="swiper-item">
					<image :src="item.image" mode="aspectFit" class="guide-image"></image>
					<view class="guide-title">{{item.title}}</view>
					<view class="guide-desc">{{item.description}}</view>
					<view v-if="index === guideList.length - 1" class="start-btn" @click="startApp">
						开始使用
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				guideList: [{
					image: '/static/guide/guide1.png',
					title: '健康评估',
					description: '专业的健康评估体系，帮助您了解自己的健康状况'
				}, {
					image: '/static/guide/guide1.png',
					title: '康复指导',
					description: '个性化的康复方案，助您恢复健康'
				}, {
					image: '/static/guide/guide1.png',
					title: '实时咨询',
					description: '专业医护团队在线答疑，随时解决您的困惑'
				}]
			}
		},
		methods: {
			startApp() {
				uni.setStorageSync('notFirstLaunch', true)
				uni.redirectTo({
					url: '/pages/login/login'
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
		background-color: #ffffff;
		
		.swiper {
			height: 100%;
			
			.swiper-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 40rpx;
				
				.guide-image {
					width: 600rpx;
					height: 600rpx;
					margin-bottom: 60rpx;
				}
				
				.guide-title {
					font-size: 40rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 20rpx;
				}
				
				.guide-desc {
					font-size: 28rpx;
					color: #666666;
					text-align: center;
					margin-bottom: 60rpx;
				}
				
				.start-btn {
					width: 400rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background-color: #3c9cff;
					color: #ffffff;
					border-radius: 40rpx;
					font-size: 32rpx;
				}
			}
		}
	}
</style> 